<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { searchFriend } from '../api/friend'
import { useStore } from 'vuex'
import { applyFriend, responseFriendApply } from '../utils/webSocketUtil'

const store = useStore()
const searchAccount = ref('')
const hasResult = ref(false)

const searchResult = ref({
  id: 0,
  userId: 0,
  applier: 0,
  receiver: 0,
  nickname: '',
  avatar: '',
  status: '',
  applyTime: ''
})

const handleKeyDown = (e) => {
  if (e.key === 'Enter') {
    searchFriend(searchAccount.value, store.getters.getUserId).then((res: any) => {
      const item = res.data
      hasResult.value = true
      searchResult.value.userId = item.userId
      searchResult.value.nickname = item.nickname
      searchResult.value.avatar = item.avatar
      searchResult.value.id = item.id['Int32']
      searchResult.value.applier = item.applier['Int32']
      searchResult.value.receiver = item.receiver['Int32']
      searchResult.value.status = item.status['String']
      searchResult.value.applyTime = item.applyTime['String']
    })
  }
}

const handleApplyFriend = (applier: number, receiver: number, status: string) => {
  responseFriendApply([applier, receiver, status], store)
  searchResult.value.status = status
}

const handleApply = (receiver: number) => {
  applyFriend(receiver, store)
  searchResult.value.status = '0'
  searchResult.value.receiver = searchResult.value.userId
}
</script>

<template>
  <div class="w-full h-9 flex items-start pl-5 pr-5">
    <caption class="caption-top text-lg mb-4 font-sans subpixel-antialiased text-gray-500">
      好友搜索
    </caption>
  </div>
  <el-divider />

  <div class="mt-5 mb-5">
    <el-input
      v-model="searchAccount"
      size="large"
      placeholder="请输入搜索的用户帐号 【按下回车进行搜索】"
      :prefix-icon="Search"
      style="width: 500px"
      @keydown="handleKeyDown"
    />
  </div>

  <div
    v-if="hasResult"
    class="w-1/2 h-20 ml-auto mr-auto flex flex-row justify-between items-center"
  >
    <div class="flex flex-row items-center">
      <img
        :src="searchResult.avatar"
        class="w-14 h-14 rounded-full mr-3 object-scale-down border"
      />
      <div class="pl-3 text-base font-sans subpixel-antialiased align-middle">
        {{ searchResult.nickname }}
      </div>
    </div>
    <div v-if="searchResult.userId != store.getters.getUserId">
      <el-button
        v-if="
          !searchResult.status ||
          (searchResult.status === '2' && searchResult.receiver !== searchResult.userId)
        "
        type="success"
        @click="handleApply(searchResult.userId)"
      >
        添加好友
      </el-button>

      <span
        v-if="searchResult.receiver === searchResult.userId && searchResult.status !== '1'"
        class="mr-5"
      >
        待同意
      </span>

      <div v-if="searchResult.status === '0' && searchResult.receiver !== searchResult.userId">
        <el-button
          type="success"
          @click="handleApplyFriend(searchResult.applier, searchResult.receiver, '1')"
        >
          同意
        </el-button>

        <el-button @click="handleApplyFriend(searchResult.applier, searchResult.receiver, '1')">
          忽略
        </el-button>
      </div>

      <el-button v-if="searchResult.status === '1'">发消息</el-button>
    </div>
  </div>

  <div v-else class="w-full ml-auto mr-auto text-gray-400 font-sans subpixel-antialiased">
    暂无搜索结果
  </div>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 0;
}
</style>
